<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <div style="color: red; font-size: 30px"></div>
  <script src="../react/react.development.js"></script>
  <script src="../react/react-dom.development.js"></script>
  <script src="../react/babel.min.js"></script>

  <script type="text/babel">
    function getSizeImage(imgUrl, size) {
      return imgUrl + `?params=${size}X${size}`
    }
    class App extends React.Component {
      constructor() {
        super(),
          this.state = {
            title: '标题',
            imgUrl: "http://p2.music.126.net/L8IDEWMk_6vyT0asSkPgXw==/109951163990535633.jpg",
            linl: "http://www.baidu.com",
            active: true
          }
      }
      handleClickIsShow() {
        console.log(this.state.active);
        this.setState({
          active: !this.state.active
        })
        ReactDOM.render(<App />, document.getElementById('app'))
      }
      render() {
        const { title, imgUrl, link, active } = this.state
        return (
          <div>
            {/*绑定普通属性*/}
            <h2 title={title}>我是标题</h2>
            <img src={getSizeImage(imgUrl, 140)} alt="" />
            <a href={link} target="_blank">百度一下</a>

            {/*绑定class*/}
            <div className="box title">我是div元素</div>
            <div className={"box title" + (active ? "active" : '')}>我也是div元素</div>
            <label htmlFor=""></label>

            {/*绑定style*/}
            <div style={{ color: 'red', fontSize: "50px" }}>我是div元素,绑定style</div>
            <button onClick={() => this.handleClickIsShow()}>按钮</button>
          </div>
        )
      }
    }
    ReactDOM.render(<App />, document.getElementById('app'))
  </script>
</body>

<style>
  .titleactive {
    width: 100px;
    height: 100px;
    background-color: deeppink;
  }
</style>

</html>